<template>
  <el-button type="primary" class="btn" @click="batchExportExcel">批量导出(Excel)</el-button>
  <el-button type="success" class="btn" @click="chooseExportExcel">选择导出(Excel)</el-button>

  <el-table
      :data="customerList"
      style="width: 100%"
      @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="50"/>
    <el-table-column type="index" label="序号" width="65"/>
    <el-table-column property="ownerDO.name" label="负责人" width="120" />
    <el-table-column property="activityDO.name" label="所属活动"/>
    <el-table-column label="姓名">
      <template #default="scope">
        <a href="javascript:" @click="view(scope.row.id)">{{ scope.row?.clueDO?.full_name }}</a>
      </template>
    </el-table-column>
    <el-table-column property="appellationDO.type_value" label="称呼"/>
    <el-table-column property="clueDO.phone" label="手机" width="120"/>
    <el-table-column property="clueDO.weixin" label="微信" width="120"/>
    <el-table-column property="needLoanDO.type_value" label="是否贷款"/>
    <el-table-column property="intentionStateDO.type_value" label="意向状态"/>
    <el-table-column property="stateDO.type_value" label="线索状态"/>
    <el-table-column property="sourceDO.type_value" label="线索来源"/>
    <el-table-column property="intentionProductDO.name" label="意向产品"/>
    <el-table-column property="next_contact_time" label="下次联系时间" width="165"/>
    <el-table-column label="操作" width="85">
      <template #default="scope">
        <el-button type="primary" @click="view(scope.row.id)">详情</el-button>
      </template>
    </el-table-column>
  </el-table>

  <p>
    <el-pagination
        background
        layout="prev, pager, next"
        :page-size="pageSize"
        :total="total"
        v-model:current-page="currentPage"
    />
  </p>
</template>


<script setup>
//页数大小
import {inject, onMounted, ref, watch} from "vue";
import instance, {doGet} from "../http/httpRequest.js";
import {getToken, messageTip} from "../util/util.js";

const reload = inject("reload");
//页面数据大小
let pageSize = ref();
//数据总数
let total = ref();
//当前是第几页
let currentPage = ref();
//用户列表
let customerList = ref([{}]);
//勾选客户id列表
let customerIdList = ref([]);

onMounted(()=>{
  getData(1);
})

watch(currentPage,(newCurrentPage)=>{
  getData(newCurrentPage);
})

//获取线索分页列表数据
const getData = (current) => {
  doGet("/api/customers", {
    current : current //当前页，前面是参数名，后面是参数值
  }).then(resp => {
    console.log(resp);
    if (resp.data.code === 200) {
      customerList.value = resp.data.data.records; // resp.data  =  R 对象
      pageSize.value = resp.data.data.size;
      total.value = resp.data.data.total;
    }
  })
}
//勾选框操作
const handleSelectionChange = (DataArray) =>{
  customerIdList.value = [];
  DataArray.forEach(data=>{
    customerIdList.value.push(data.id);
  })
}
//导出操作
const exportExcel = (ids) => {
  let token = getToken();
  //1、向后端发送一个请求 （我们来实现）
  let iframe = document.createElement("iframe")
  if (ids) {
    iframe.src = instance.defaults.baseURL + "/api/exportExcel?Authorization="+token + "&ids="+ ids;
  } else {
    iframe.src = instance.defaults.baseURL + "/api/exportExcel?Authorization="+token
  }
  iframe.style.display = "none"; //iframe隐藏，页面上不要显示出来
  document.body.appendChild(iframe);
  //2、后端查询数据库的数据，把数据写入Excel，然后把Excel以IO流的方式输出到前端浏览器（我们来实现）
  //3、前端浏览器弹出一个下载框进行文件下载（浏览器本身实现的，不需要我们去实现）
}
//批量导出
const batchExportExcel = () => {
  exportExcel(null);
}
//选择导出
const chooseExportExcel = () => {
  if (customerIdList.value.length <= 0) {
    messageTip("请选择要导出的数据", "warning");
    return;
  }
  // 转换为以逗号分隔的数组格式 ids = "1,3,6,11,15";
  exportExcel(customerIdList.value.join(","));
}
//详情页面
const view = (id) => {

}
</script>

<style scoped>
.el-table {
  margin-top: 10px;
}
</style>